<template>
  <div>
<h3>Home</h3>
<table class="table table-bordered bg-primary">
<tbody>
  <tr class="bg-primary">
    <td>ID</td>
    <td>姓名</td>
    <td>年龄</td>
    <td>护肤</td>
    <td>操作</td>
  </tr>
  <tr v-for="item in arrObj":key="item.id">
    <td>{{item.id}}</td>
    <td>{{item.name}}</td>
    <td>{{item.age}}</td>
    <td>{{item.marry}}</td>
    <input type="button" class="btn btn-primary" value="修改" >
    <input type="button" class="btn btn-danger" value="删除" >
    <input type="button" class="btn btn-success" value="删除" >
  </tr>
</tbody>
</table>
<hr/>
<select>
  <option value="">请选择</option>
  <option v-bind:value="item.id" v-for="item in city":key="item.id">{{item.name}}</option>
</select>
  </div>
</template>

<script setup lang="ts">

//v-on:表示绑定实践   v-on:click(事件类型)
//v-for：表示循环    v-for="(item,index) in 变量"item数组或对象中的元素 index表示
//v-bind:单向绑定
import {ref,reactive}from 'vue'
let arrObj = reactive([
{id:1,name:'张三',age:20,marry:false},
{id:2,name:'李四',age:25,marry:false},
{id:3,name:'王五',age:20,marry:false},
{id:4,name:'赵六',age:20,marry:false},
{id:5,name:'张七',age:27,marry:true},
])

let city = reactive([
  {id:1,name:'河北'},
  {id:1,name:'河南'},
  {id:1,name:'江西'},
  {id:1,name:'河北'},
  {id:1,name:'河北'},
])


</script>

<style scoped>

</style>